<template>
    <el-row :span="24" class="warp" id="loginwarp">
      <img class="loginbg" id="loginbg" src="../assets/loginnew6.png">
      <el-col class="loginbox">
            <div class="login-nr">
                <div class="login-nr-header">
                  <img src="../assets/hdlogo1.png" height="50">
                  <div class="">河北汇多物联</div>
                </div>
                <div class="login-content" @keyup.13="login">
                      <ul>
                        <li>
                            <span>用户名</span>
                            <div class="userbox">
                              <span></span>
                              <input id="username" type="" name="">
                            </div>
                        </li>
                        <li>
                            <span>密码</span>
                            <div class="passwordbox">
                              <span></span>
                              <input type="password" id="userpass" name="">
                            </div>
                        </li>
                        <li>
                            <input class="login" @click="login" type="button" name="" value="登录" >
                            <input class="login" @click="rest" type="button" name="" value="重置" >
                        </li>
                      </ul>
                </div>
            </div>
      </el-col>
    </el-row>
</template>
<script>
export default {
  name: 'login',
  data () {
    return {
    }
  },
  methods:{
    login(){
      let username=document.getElementById("username").value;
      let password=document.getElementById("userpass").value;
      let that=this;

       //测试用户登录
       if(username == "zyl" && password == "zyl"){
          window.sessionStorage.setItem("username",username);
          that.$store.commit("userEdit",username);
          window.sessionStorage.setItem("password",password);
          that.$router.push("/layout");
          return false;
      }

/*
      //内部用户登录
      if(username == "ls" && password == "ls"){
          window.sessionStorage.setItem("username",username);
          that.$store.commit("userEdit",username);
          //console.log(that.$store.state.username);
          window.sessionStorage.setItem("password",password);
          this.set_log("用户登录");
          that.$router.push("/layout");
          return false;
      }*/

      if(username != "admin"){
          this.$message({
              message: '用户名错误,请重新填写!',
              type: 'error',
              center:true,
              showClose: true
          });
          return false;
      }
       
      $.ajax({
          url:'../cfg/password.json',
          type:'GET',
          cache:false,
          async: false,
          dataType:'text',
          success:function(result){
              let data = eval("("+result+")");
              if(password != data.password){
                  that.$message({
                      message: '密码错误,请重新填写!',
                      type: 'error',
                      center:true,
                      showClose: true
                  });
                  return false;
              }
              
              window.sessionStorage.setItem("username",username);
              that.$store.commit("userEdit",username);
              window.sessionStorage.setItem("password",password);
              that.set_log("用户登录");
              that.$router.push("/layout");
              return true;
          },
          error:function(realdata){                           
          }
      })

    },
    rest(){
        document.getElementById("username").value="";
        document.getElementById("userpass").value="";
    },
    set_log(str){//用户操作日志
        let  msg= {"cmd":"CGI_LOG_SET_OPT","content":str};
        $.ajax({
            url:"cgi-bin/main.cgi",
            contentType: "application/json;charset=utf-8",
            type:"post",
            data:JSON.stringify(msg),
            success:function(msg){           
            }
        })
    }
  },
  mounted(){
    function getClientHeight()
    {
      var clientHeight=0;
      if(document.body.clientHeight&&document.documentElement.clientHeight)
      {
      var clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
      }
      else
      {
      var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
      }
      return clientHeight;
    }
    document.getElementById("app").style.height=getClientHeight()+"px";
    document.getElementById("loginbg").style.height=getClientHeight()+"px";
    let that=this;
    // window.onresize=function(){
    //   that.$router.go(0);
    // }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >
.warp{
  width: 100%;
  height: 100%;
  overflow: hidden;
  left: 0px;top: 0px;
  position: absolute;
}
.loginbg{
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 100;
  width: 100%;
  height: 100%;
}
.warp .loginbox{
  height: 400px;
  width: 350px;
  background: url("../assets/white7.png") repeat;
  position: absolute;
  z-index: 101;
  right: 5%;
  top: 50%;
  margin-top: -16%;
  border-radius:10px;
  border:2px solid #0080c0;
  color: #000;
}
.login-nr{
  width: 310px;
  margin:auto;
  height: 360px;
  margin-top: 20px;
}
.login-nr-header{
  height: 60px;
  border-bottom: 2px solid #0080c0;
  width: 100%;
  font-size: 25px;
  line-height: 50px;
  letter-spacing: 3px;
}
.login-nr-header img{
  float: left;
  margin-right: 20px;
}
.login-content{
  width: 100%;
  height: 300px;
}
.login-content ul li{
  width: 100%;
  height: auto;
  overflow: hidden;
}
.login-content ul li span{
  display: block;
  width: 95%;
  height: 40px;
  margin: auto;
  font-size: 18px;
  letter-spacing: 2px;
  line-height: 40px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.login-content ul li div{
  height: 35px;
  width: 95%;
  margin: auto;
  background: #fff;
  border-radius: 5px;
}
.login-content ul li div input{
   float: left;
   width: 80%;
   border:0px;
   border-color: #fff;
   background: #fff;
   height: 35px;
   font-size: 16px;
   letter-spacing: 2px;
   line-height: 35px;
}
.login-content ul li div span{
    display: block;
    width: 15%;
    height: 100%;
    float: left;
    margin: 0px;
}
.login-content ul li div.passwordbox span{
  background: url(../assets/passowrdnew.png) center no-repeat;
}
.login-content ul li div.userbox span{
  background: url(../assets/usernew.png) center no-repeat;
}
.login{
  height: 35px;
  font-size: 16px;
  width: 40%;
  letter-spacing: 5px;
  cursor: pointer;
  float: left;
  margin-left: 7%;
  border-radius: 5px;
  background: #fff;
  border:1px solid #ccc;
  margin-top: 35px;
}
.login:hover{
  background: #0080c0;
  color: #fff;
}
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
}
</style>
